<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="page-view-size" content="1280*720" />
    <link rel="stylesheet" href="style/base.css" />
    <title>熊猫部落-熊猫大本营</title>
    <style>
      body {
        position: absolute;
        margin: 0;
        padding: 0;
        width: 1280px;
        height: 720px;
        background-repeat: no-repeat;
        background-color: transparent;
        overflow: hidden;
      }
      #title { 
        position: absolute;
        width: 232px;
        height: 60px;
        left: 50px;
        top: 30px;
        font-size: 30px;
        color: #fff;
      }
      #nav{
        position: absolute;
        left: 50px;
        top: 100px;
        width: 290px;
        height: 560px;
        overflow: hidden;
        padding: 3px 0;
      }
      #nav-container{
       position: relative;
      }
      #nav .active{
        width: 240px;
        border-radius: 0 30px 30px 0;
        box-shadow: 1px 1px 5px rgba(0,0,0,.5)!important;
        z-index: 10;
      }
      .nav-item{
        width: 212px;
        line-height: 50px;
        height: 50px;
        padding: 10px 20px;
        font-size: 27px;
        color: #fff;
        text-shadow: 1px 1px 3px rgba(0,0,0,.5);
      }
      .nav-item.focus{
        border: none !important;
        transform: scale(1);
        -webkit-transform:scale(1) !important; 
        margin: 0;
      }
      #list {
        position: absolute;
        left: 352px;
        top: 105px;
        width: 900px;
      }
      #list .item {
        position: absolute;
        width: 272px;
        height: 163px;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 1px 1px 5px rgba(0,0,0,.5);
      }
      #list-0,
      #list-1,
      #list-2{
        top: 0;
      }
      #list-3,
      #list-4,
      #list-5{
        top: 193px;
      }
      #list-6,
      #list-7,
      #list-8{
        top: 386px;
      }
      #list-0,
      #list-3,
      #list-6{
        left: 0;
      }
      #list-1,
      #list-4,
      #list-7{
        left: 302px;
      }
      #list-2,
      #list-5,
      #list-8{
        left: 604px;
      }
      #page {
        color: #fff;
        position: absolute;
        top: 60px;
        right: 50px;
        font-size: 18px;
      }
      #page .color {
        color: #feb802
      }
    </style>
  </head>
  <body onload="init()">
    <div id="main">
	<!-- 联通不要 -->
      <div class='smallResolution' id="smallResolution"></div>
	  <!-- 联通不要 -->
      <div id="title"></div>
      <div id="page"></div>
      <div id="nav">
        <div id="nav-container"></div>
      </div>
      <div id="list"></div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="config/index.js"></script>
    <script src="api/index.js"></script>
    <script src="js/utlis.js"></script>
    <script src="js/KeyEnter.js"></script>
    <script src="js/event.js"></script>
    <script src="js/move.js"></script>
    <script src="js/log.js"></script>
    <script src="js/page.js"></script>

    <script src="components/dialog.js"></script>
    <script src="components/list.js"></script>
    <script src="components/camp/nav.js"></script>
    <script>
      function getPreFocus() {
        var typeId = utils.getUrlParam("typeId", "")
        var navIndex = utils.getUrlParam("nav", 0)
        var pageSize = utils.getUrlParam("page", 1)

        nav.typeId = typeId
        nav.index = navIndex
        nav.init()
        nav.renderList(pageSize)
        // list.page = pageSize
        var elId = utils.getUrlParam("elId", "")
        var dom = document.getElementById(elId || "nav-0")
        dom && utils.toggleClass(dom)
      }

      function init () {
        page.init()
        getPreFocus()
        dialog.init()
        log.commit({
          name: '熊猫大本营页面',
          type1: 'browse',
          type2: 'camp',
          starttime: new Date().getTime(),
        })
      }

      function keyUp () {
        if (dialog.visible) return
        var id = $('.focus').attr('id')
        var dom = null
        if (id.indexOf('nav') > -1) {
          dom = move.up()
          dom && utils.toggleClass(dom)
          if (nav.index > 0) {
            nav.index--
            nav.renderList()
          }
        } else if (id.indexOf('list') > -1) {
          var index = parseInt(id.match(/\d+/)[0]);
          var len = list.data.length
          if (index >= 3) {
            index -= 3
          } else {
            if (list.page > 1) {
              list.page--
              list.getData()
              index = index % 3 + 6
            }
          }
          utils.toggleClass($('#list .item').eq(index)[0])
        }
      }

      function keyDown () {
        if (dialog.visible) return
        var id = $('.focus').attr('id')
        var dom = null
        if (id.indexOf('nav') > -1) {
          dom = move.down()
          dom && utils.toggleClass(dom)
          if ((nav.types.length - 1) > nav.index) {
            nav.index++
            nav.renderList()
          }
        } else if (id.indexOf('list') > -1) {
          var index = parseInt(id.match(/\d+/)[0]);
          var len = page.data.list.length
          index += 3
          if (index >= len) {
            if (list.totalPage > list.page) {
              list.page++
              list.getData()
              index %= 3
              if (index >= list.total - (list.page - 1) * list.number){
                index = list.total - (list.page - 1) * list.number - 1;
              }
            } else {
              if (Math.ceil(len / 3) != Math.ceil((index - 2) / 3)){
                index = len - 1
              }
            }
          } 
          utils.toggleClass($('#list .item').eq(index)[0])
        }
      }

      function keyLeft () {
        if (dialog.visible || list.loading) return
        var id = $('.focus').attr('id')
        if (id.indexOf('list') > -1) {
          var index = parseInt(id.match(/\d+/)[0])
          if (index == 0 || index == 3 || index == 6) {
            $('.item').removeClass('focus')
            $('.active').addClass('focus')
          } else {
            index--
            utils.toggleClass($('#list .item').eq(index)[0])
          }
        }
      }

      function keyRight () {
        if (dialog.visible || list.loading) return
        var id = $('.focus').attr('id')
        if (id.indexOf('nav') > -1) {
          utils.toggleClass($('#list .item').eq(0)[0])
        } else if (id.indexOf('list') > -1) {
          var index = parseInt(id.match(/\d+/)[0])
          if ((index + 1) % 3 != 0) {
            index++;
            if (index < page.data.list.length) {
              utils.toggleClass($('#list .item').eq(index)[0])
            }
          }
        }
      }

      function keyEnter () {
        var info = utils.getCurInfo()
        if (info.type == 'nav') return 
        // nav.typeId = typeId
        // nav.index = nav
        // nav.init()
        var elId = info.id
        var typeId = nav.typeId
        var pageSize = list.page
        var navIndex = nav.index
        var data = page.data.list[info.index]
        var form = config.path + '/camp.html?elId=' + elId + '&typeId=' + typeId + '&page=' + pageSize + '&nav=' + navIndex
        var to = config.path + "/vod.html?seriesId=" + data.ID
        page.addUrl(to, form)
      }

      function keyBack () {
        if (dialog.visible) {
          dialog.hide()
        } else {
          page.goback()
        }
      }

    </script>
  </body>
</html>
